<template>
  <!-- 
    switchState == 1 启用
    switchState == 0 禁用
  -->
  <div class="sgh-switch">
    <Label :value="labelValue" :name="name" />
    <section
      :class="{ switch: true, disbale: !switchState, enable: switchState }"
      @click.stop="_onClick"
    >
      <span class="show-state">
        {{ switchState == 1 ? "启用" : "禁用" }}
      </span>
      <span class="switch-circle"></span>
    </section>
  </div>
</template>

<script>
import Label from "@/components/Label/index.vue";
export default {
  name: "MySwitch",
  props: ["labelValue", "name", "switchState"],
  components: {
    Label,
  },
  methods:{
    _onClick(){
      this.$emit('onClick');
    }
  }
};
</script>

<style lang="scss">
$theme-green-color: #48aa4e;
.sgh-switch {
  .switch {
    user-select: none;
    height: 20px;
    line-height: 20px;
    font-size: 8px;
    width: 60px;
    background-color: #999;
    border-radius: 100px;
    text-align: center;
    cursor: pointer;
    position: relative;
    .show-state {
      color: #fff;
    }
    .switch-circle {
      height: 16px;
      width: 16px;
      left: 2px;
      top: 2px;
      background-color: #fff;
      border-radius: 100%;
      position: absolute;
      transition: left 0.5s;
    }
  }
  .disbale {
    .switch-circle {
      left: 2px;
    }
  }

  .enable {
    background-color: $theme-green-color;
    .switch-circle {
      left: 42px;
    }
  }
}
</style>